<template>
  <div>
    <div class="top-card">
      <el-row :gutter="10">
        <el-col :span="6">

          <!-- 卡片1 -->
          <el-card>
            <Detail title="总销售额" count="总计:￥1267585">
              <template v-slot:charts>
                <!-- <LineIndex /> -->
                <div :style="{
                  display: 'flex',
                  flexDirection: 'row',
                  alignItems: 'center',
                  width: '100%',
                  height: '100px',
                  marginBottom: '5px',
                  border: '1px solid #efefef',
                  borderRadius: '5px',
                }">
                  <span style="font-size:20px;margin:15px;">同周比：+47.8%</span><br>
                  <span style="font-size:20px;margin:15px;">日同比：+19.78%</span>
                </div>
              </template>
              <template v-slot:footer>
                <span>日销售额：￥12423</span>
              </template>
            </Detail>
          </el-card>
        </el-col>

        <!-- 卡片2 -->
        <el-col :span="6">
          <el-card>
            <Detail title="访问量" count="总计:88460">
              <template v-slot:charts>
                <LineIndex />
              </template>
              <template v-slot:footer>
                <span>日访问量：1234</span>
              </template>
            </Detail>
          </el-card>
        </el-col>

        <!-- 卡片3 -->
        <el-col :span="6">
          <el-card>
            <Detail title="支付笔数" count="总计:67548">
              <template v-slot:charts>
                <BarIndex />
               
                <!-- <SaleNew /> -->
              </template>
              <template v-slot:footer>
                <span>转换率：64%</span>
              </template>
            </Detail>
          </el-card>
        </el-col>

        <!-- 卡片4 -->
        <el-col :span="6">
          <el-card>
            <Detail title="运营活动效果" count="总计:78%">
              <template v-slot:charts>
                <ProgessVue />
              </template>
              <template v-slot:footer>
                <span>周同比：56.67%
                  <svg t="1637478902688" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3315" width="16" height="16">
                    <path
                      d="M786.295467 485.000533l-6.126934 2.082134v-18.295467h6.024534l0.1024 16.213333zM221.5424 485.239467h-8.9088l-0.085333-16.247467 8.994133-0.512v16.759467z"
                      fill="#1afa29" p-id="3316" />
                    <path
                      d="M784.469333 480.290133L504.456533 178.978133a6.826667 6.826667 0 0 0-10.001066 0L214.459733 480.290133a6.826667 6.826667 0 0 0 5.922134 11.4176l158.1056-21.435733L358.4 853.333333v16.162134a6.826667 6.826667 0 0 0 6.826667 7.168h268.356266a6.826667 6.826667 0 0 0 6.826667-7.168l-0.119467-16.3328-19.848533-382.8736 158.122667 21.418666a6.826667 6.826667 0 0 0 5.922133-11.4176z"
                      fill="#1afa29" p-id="3317" />
                    <path
                      d="M191.3344 734.6176l103.031467 72.789333 103.048533-72.789333a127.197867 127.197867 0 0 0-206.097067 0z"
                      fill="#1afa29" p-id="3318" />
                    <path
                      d="M294.382933 681.984a127.010133 127.010133 0 0 1 103.048534 52.6336l-103.048534 72.789333-103.031466-72.789333a127.010133 127.010133 0 0 1 103.048533-52.6336m0-10.24a137.915733 137.915733 0 0 0-111.342933 56.849067 10.24 10.24 0 0 0 2.269866 14.2848l0.136534 0.1024L288.426667 815.786667a10.24 10.24 0 0 0 11.810133 0l103.031467-72.772267a10.24 10.24 0 0 0 2.4064-14.3872 137.915733 137.915733 0 0 0-111.342934-56.849067z"
                      fill="#1afa29" p-id="3319" />
                    <path d="M384.1536 444.142933h1.5872l-20.48 409.6h268.2368l-20.48-409.6" fill="#1afa29"
                      p-id="3320" />
                    <path
                      d="M633.4976 860.5696H365.226667a6.826667 6.826667 0 0 1-6.826667-7.168l20.48-409.6 5.239467 0.256v-6.826667h1.5872a6.826667 6.826667 0 0 1 6.826666 7.168l-20.1216 402.432H626.346667l-20.1216-402.432 13.653333-0.682666 20.48 409.6a6.826667 6.826667 0 0 1-6.826667 7.168z"
                      fill="#1afa29" p-id="3321" />
                    <path
                      d="M613.0176 446.276267l166.365867 22.545066L499.387733 167.509333 219.374933 468.821333l164.778667-22.545066"
                      fill="#1afa29" p-id="3322" />
                    <path
                      d="M633.4976 860.5696H365.226667a6.826667 6.826667 0 0 1-6.826667-7.168l19.968-399.240533-158.122667 21.435733a6.826667 6.826667 0 0 1-5.922133-11.4176L494.370133 162.8672a6.826667 6.826667 0 0 1 10.001067 0L784.384 464.213333a6.826667 6.826667 0 0 1-5.922133 11.4176l-158.122667-21.418666L640.3072 853.333333a6.826667 6.826667 0 0 1-6.826667 7.168z m-261.12-13.653333H626.346667L606.3104 446.634667a6.826667 6.826667 0 0 1 7.7312-7.099734l147.3536 19.950934L499.370667 177.493333 237.3632 459.485867l147.3536-19.968a6.826667 6.826667 0 0 1 7.7312 7.099733z"
                      fill="#1afa29" p-id="3323" />
                    <path
                      d="M557.3632 617.5744l149.5552 105.659733 149.572267-105.659733a184.644267 184.644267 0 0 0-299.1616 0z"
                      fill="#1afa29" p-id="3324" />
                    <path
                      d="M706.935467 541.184a184.32 184.32 0 0 1 149.572266 76.3904l-149.572266 105.659733-149.5552-105.659733a184.32 184.32 0 0 1 149.572266-76.3904m0-10.24a194.56 194.56 0 0 0-157.866666 80.622933 10.24 10.24 0 0 0 2.184533 14.2336l0.221867 0.1536 149.5552 105.659734a10.24 10.24 0 0 0 11.810133 0l149.5552-105.642667a10.24 10.24 0 0 0 2.4064-14.3872 194.56 194.56 0 0 0-157.866667-80.622933z"
                      fill="#1afa29" p-id="3325" />
                  </svg></span>
                &nbsp;&nbsp;
                <span>日同比：19.96%<svg t="1637478988225" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="4331" width="16" height="16">
                    <path
                      d="M252.484267 566.749867h11.776v16.6912h-11.776zM815.684267 566.8352h10.461866v16.9984h-10.461866z"
                      fill="#996E28" p-id="4332" />
                    <path
                      d="M825.361067 580.642133a6.826667 6.826667 0 0 0-6.980267-3.618133l-158.0032 21.418667L680.2432 201.386667a6.826667 6.826667 0 0 0 0-1.058134v-1.109333a6.826667 6.826667 0 0 0-6.826667-7.168H405.1968a6.826667 6.826667 0 0 0-6.826667 7.168v1.109333a6.826667 6.826667 0 0 0 0 1.058134l19.848534 397.038933-158.0032-21.4016a6.826667 6.826667 0 0 0-5.922134 11.4176l280.0128 301.277867a6.826667 6.826667 0 0 0 10.001067 0L824.32 588.424533a6.826667 6.826667 0 0 0 1.041067-7.7824z"
                      fill="#996E28" p-id="4333" />
                    <path
                      d="M339.780267 523.7248H103.6288a17.066667 17.066667 0 1 1 0-34.133333h236.151467a13.380267 13.380267 0 1 0 0-26.760534h-33.467734a44.782933 44.782933 0 1 1 0.631467-89.565866h238.250667a17.066667 17.066667 0 0 1 0 34.133333h-238.250667a11.093333 11.093333 0 0 0-11.229867 9.5744 10.717867 10.717867 0 0 0 10.5984 11.7248h33.467734a47.5136 47.5136 0 1 1 0 95.0272z"
                      fill="#D5382E" p-id="4334" />
                    <path
                      d="M545.194667 373.282133a17.066667 17.066667 0 0 1 0 34.133334h-238.250667a11.093333 11.093333 0 0 0-11.229867 9.5744 10.717867 10.717867 0 0 0 10.5984 11.7248h33.467734a47.5136 47.5136 0 1 1 0 95.0272H103.6288a17.066667 17.066667 0 1 1 0-34.133334h236.151467a13.380267 13.380267 0 1 0 0-26.760533h-33.467734a44.782933 44.782933 0 1 1 0.631467-89.565867h238.250667m0-10.24h-238.250667a55.022933 55.022933 0 1 0-0.631467 110.045867h33.467734a3.140267 3.140267 0 1 1 0 6.280533H103.6288a27.306667 27.306667 0 1 0 0 54.613334h236.151467a57.7536 57.7536 0 1 0 0-115.5072h-33.467734a0.512 0.512 0 0 1-0.290133-0.170667 0.3584 0.3584 0 0 1-0.119467-0.221867 1.416533 1.416533 0 0 1 1.041067-0.426666h238.250667a27.306667 27.306667 0 0 0 0-54.613334z"
                      fill="#E8D4AB" p-id="4335" />
                    <path d="M654.523733 591.854933h-1.5872l20.48-409.6H405.1968l20.48 409.6" fill="#AF3131"
                      p-id="4336" />
                    <path d="M654.523733 593.5616h-1.5872l20.48-409.6H405.1968l20.48 409.6" fill="#D5382E"
                      p-id="4337" />
                    <path
                      d="M654.523733 600.388267h-1.5872a6.826667 6.826667 0 0 1-6.826666-7.168l20.1216-402.432H412.3648l20.1216 402.432-13.653333 0.682666-20.48-409.6a6.826667 6.826667 0 0 1 6.826666-7.168h268.253867a6.826667 6.826667 0 0 1 6.826667 7.168l-20.48 409.6-5.239467-0.256z"
                      fill="#E8D4AB" p-id="4338" />
                    <path
                      d="M425.6768 589.704533l-166.365867-22.528L539.306667 868.471467l279.995733-301.294934-164.778667 22.528"
                      fill="#D5382E" p-id="4339" />
                    <path
                      d="M425.6768 591.4112l-166.365867-22.528L539.306667 870.178133l279.995733-301.294933-164.778667 22.528"
                      fill="#D5382E" p-id="4340" />
                    <path
                      d="M539.306667 874.837333a6.826667 6.826667 0 0 1-5.000534-2.184533L254.293333 571.357867a6.826667 6.826667 0 0 1 5.922134-11.4176l158.122666 21.418666-19.968-399.223466a6.826667 6.826667 0 0 1 6.826667-7.168h268.2368a6.826667 6.826667 0 0 1 6.826667 7.168l-19.968 399.240533 158.122666-21.435733a6.826667 6.826667 0 0 1 5.922134 11.4176L544.3072 872.6528a6.826667 6.826667 0 0 1-5.000533 2.184533zM277.2992 576.034133L539.306667 857.975467l262.007466-281.941334-147.3536 19.968a6.826667 6.826667 0 0 1-7.7312-7.099733l20.0192-400.2816H412.3648l20.0192 400.264533a6.826667 6.826667 0 0 1-7.7312 7.099734z"
                      fill="#E8D4AB" p-id="4341" />
                    <path
                      d="M780.7488 226.338133h105.540267a17.066667 17.066667 0 0 1 0 34.133334h-105.540267a13.380267 13.380267 0 1 0 0 26.760533h8.0384a44.782933 44.782933 0 1 1 0.631467 89.565867H503.7056a17.066667 17.066667 0 0 1 0-34.133334h285.730133a10.717867 10.717867 0 0 0 10.5984-11.7248 11.076267 11.076267 0 0 0-11.229866-9.5744h-8.0384a47.5136 47.5136 0 1 1 0-95.0272z"
                      fill="#D5382E" p-id="4342" />
                    <path
                      d="M886.289067 226.338133a17.066667 17.066667 0 0 1 0 34.133334h-105.540267a13.380267 13.380267 0 1 0 0 26.760533h8.0384a44.782933 44.782933 0 1 1 0.631467 89.565867H503.7056a17.066667 17.066667 0 0 1 0-34.133334h285.730133a10.717867 10.717867 0 0 0 10.5984-11.7248 11.076267 11.076267 0 0 0-11.229866-9.5744h-8.0384a47.5136 47.5136 0 1 1 0-95.0272h105.540266m0-10.24h-105.557333a57.7536 57.7536 0 1 0 0 115.5072h8.0384a1.416533 1.416533 0 0 1 1.041067 0.426667 0.341333 0.341333 0 0 1-0.119467 0.221867 0.802133 0.802133 0 0 1-0.221867 0.170666H503.7056a27.306667 27.306667 0 0 0 0 54.613334h285.730133a55.022933 55.022933 0 1 0-0.631466-110.045867h-8.0384a3.140267 3.140267 0 1 1 0-6.280533h105.540266a27.306667 27.306667 0 0 0 0-54.613334z"
                      fill="#E8D4AB" p-id="4343" />
                  </svg></span>
              </template>
            </Detail>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import DetailIndex from "./Detail/DetailIndex.vue";
import LineIndex from "./card2/LineIndex.vue";
import ProgessVue from "./card4/ProgessVue.vue";
import BarIndex from "./card3/BarIndex.vue";
export default {
  name: "TopCard",
  components: {
    // SaleNew,
    Detail: DetailIndex,
    LineIndex,
    BarIndex,
    ProgessVue
  }

}
</script>

<style></style>